<template>
  <div class="hl-home" v-if="info">
    <van-row type="flex" justify="space-around">
      <van-col :span="6">
        <div class="icon">
          <van-icon name="after-sale" color="#ee0a24" />
        </div>
        <div class="value price">{{ info.hE1.todays }}</div>
        <div class="title">今日消费</div>
      </van-col>
      <van-col :span="6">
        <div class="icon bg1">
          <van-icon name="balance-o" color="#0278e9" />
        </div>
        <div class="value price">{{ info.hE1.totalPrice }}</div>
        <div class="title">消费总计</div>
      </van-col>
      <van-col :span="6">
        <div class="icon bg2">
          <van-icon name="balance-list-o" color="#32CD32" />
        </div>
        <div class="value">{{ info.hE1.counts }}单</div>
        <div class="title">订单总数</div>
      </van-col>
    </van-row>

    <div class="hl-nutrition">
      <div class="hl-card">
        <div id="hlMainPie" ref="chartPie" style="width: 100%; height: 260px"></div>
      </div>
      <div class="hl-card">
        <div id="hlMainBar" ref="chartBar" style="width: 100%; height: 170px; padding-left: 8px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Col, Row } from 'vant'
import { GetHomeEchart } from '../api/user'
export default {
  components: {
    [Col.name]: Col,
    [Row.name]: Row
  },
  data() {
    return {
      info: null
    }
  },
  created() {
    GetHomeEchart()
      .then(res => {
        this.info = res
        setTimeout(() => {
          this.initChart()
        }, 500)
      })
      .catch(err => {
        this.$toast(err)
      })
  },
  methods: {
    initChart() {
      const refChartPie = this.$refs.chartPie
      if (refChartPie && this.info?.hE2?.length > 0) {
        const Chart = window.echarts.init(refChartPie)
        const data = this.info.hE2.map(m => ({ name: m.name, value: m.num }))
        const option = {
          title: { text: '商品选购情况统计', left: 'center' },
          series: [{ name: '选购商品', type: 'pie', radius: '50%', data }]
        }
        Chart.setOption(option)
      }
      const refChartbar = this.$refs.chartBar
      if (refChartbar && this.info?.hE3?.length > 0) {
        const Chart = window.echarts.init(refChartbar)
        const xdata = this.info.hE3.map(m => m.createDate)
        const data = this.info.hE3.map(m => m.price)
        // 指定图表的配置项和数据
        let option = {
          title: { text: '历史订单费用统计', left: 'center' },
          xAxis: { type: 'category', data: xdata },
          yAxis: { type: 'value' },
          series: [{ data, type: 'bar', label: { show: true } }]
        }
        Chart.setOption(option)
      }
    }
  }
}
</script>

<style lang="less">
.hl-home {
  .van-row {
    margin: 16px 0;
    .van-col {
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 16px;
      padding-bottom: 8px;
      .icon {
        font-size: 24px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          display: inline-block;
          box-sizing: border-box;
          top: -10px;
          left: -10px;
          width: 45px;
          height: 45px;
          background-color: #ee0a24;
          border-radius: 50%;
          transform: scale(0.9);
          opacity: 0.1;
        }
      }
      .bg1::before {
        background-color: #0278e9;
      }
      .bg2::before {
        background-color: #32cd32;
      }
      .title {
        margin-top: 6px;
        font-size: 14px;
        color: #888;
      }
      .value {
        margin-top: 8px;
        font-size: 22px;
        color: #666;
      }
      .price::before {
        content: '¥';
        font-size: 0.8em;
        margin-right: 2px;
      }
    }
  }
  .hl-nutrition {
    padding: 8px;
  }
  .hl-card {
    background-color: #fff;
    padding-top: 16px;
    border-radius: 12px;
    &:nth-of-type(n + 2) {
      margin-top: 8px;
    }
  }
}
</style>
